<style lang="less" scoped>
.answer{
    width: 100%;
    .nav{
        position: fixed;
        top: 0;
        width: 100%;
        height: 50px;
        z-index: 1000;
        background-color: #fff;
        .container{
            width: 94%;
            margin: 0 auto;
            margin-top: 10px;
            position: relative;
            .group{
                position: absolute;
                top: 2px;
                left: 0;
                span{
                    font-size: 20px;
                    font-weight: bold;
                }
            }
            .icon_2{
                position: absolute;
                top: 2px;
                right: 0;
            }
        }
    }
    .main{
        margin-top: 50px;
        .container{
            width: 94%;
            margin: 0 auto;
            margin-top: 10px;
            position: relative;
            .title{
                width: 220px;
                margin: 0 auto;
                margin-top: 200px;
            }
            .input{
                margin-top: 60px;
                width: 100%;
                height: 60px;
                border: 10px solid; /* Adjust border width */
                border-image-slice: 1;
                border-width: 5px;
                border-image-source: linear-gradient(to right, #c0a1ed, #5e4fe0);
                border-radius: 10%;
                font-size: 20px;
                input{
                    width: 100%;
                    border-radius: 10px;
                    height: 100%;
                    text-indent: 2em;
                }
            }
            .quest{
                margin-top: 20px;
                width: 100%;
                height: 200px;
                // border: 1px solid black;
                position: relative;
                .text{
                    height: 40px;
                    width: 100%;
                    line-height: 40px;
                    margin-top: 10px;
                    // border: 1px solid #c0a1ed;
                    font-size: 16px;
                    text-indent: 16px;
                    position: relative;
                    background-color: #fafafc;
                    border-radius: 10px;
                    .icon{
                        font-size: 16px;
                        color: #5e4fe0;
                        font-weight: bolder;
                        position: absolute;
                        top: 0;
                        right: 6px;
                    }
                }
            }
        }
    }
}
</style>

<template>
    <div class="answer">
        <div class="nav">
            <div class="container">
                <div class="group">
                    <div class="icon_1"></div>
                    <span><i>懂乎直答</i></span>
                </div>    
                <div class="icon_2">
                    <van-icon name="search" size="0.8rem" />
                </div>
            </div>    
        </div>
        <div class="main">
            <div class="container">
                <div class="title">
                    <span>用 提 问 发 现 世 界</span>
                </div>
                <div class="input" @click="$router.push({path:'/search'})">
                    <input type="text" placeholder="输入你想问的">
                </div>
                <div class="quest">
                    <div class="text" v-for="(item,index) in obj">
                        {{ item.text }}
                        <div class="icon">>></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import answer from '@/api/index'
export default {
    data(){
        return{
            obj:[
                {
                    text:'如何看待2024 年9月25日 A 股的市场行情',     
                },
                {
                    text:'为什么现在的年轻人更容易觉得疲惫？',     
                },
                {
                    text:'该不该为了男朋友放弃考研？',     
                },
            ],
        }
    },
    methods:{
        
    },
    mounted(){
        
    }
}
</script>